// 控制页面登录权限的文件
// 对路由权限跳转做拦截
// import router, { asyncRoutes, constantRoutes } from '@/router/index.js'
import router from '@/router/index.js'
import store from '@/store/index.js'
// 前置路由守卫--在页面跳转之前做拦截
router.beforeEach(async(to, from, next) => {
  // to: 去哪里的路由信息
  // from: 从哪里来的路由信息
  // next: 控制能否跳转
  // console.log(to, from, next)
  // 如果没有登录,跳转到登录页面,如果登录了,允许跳转
  // 注意: 在vue文件中,可以通过this.$store.state.user访问到数据,但是在js文件中不可以,这里的this不是指向组件了

  // 白名单路径: 允许直接访问登录页面
  // if (to.path === '/login' || to.path === '/learnVuex' || to.path === '/404')简化成下面的写法
  if (['/login', '/learnVuex', '/404'].includes(to.path)) {
    return next()
  }
  // 判断有无token
  // 已经在getters中进行了快捷访问的设置
  if (store.getters.token) {
    // 允许路由跳转
    // 获取用户信息如果为空
    if (!store.getters.userId) {
      // 这里已经在vuex中的getters中设置了一个映射
      // 如果没有id这个值 才会调用 vuex的获取资料的action
      /* await store.dispatch('user/getUserInfo')
      // 这里为啥要用await???? 因为我们想要获取完资料再去放行

      // 获取用户的菜单表示
      // 方式1---从vuex中获取
      // const { roles: { menus }} = store.state.user.userInfo
      // console.log(menus)
      // 方式2 --- 直接在store的模块user里面return出基本信息baseResult 就可以取到里面的值了
      const { roles: { menus }} = await store.dispatch('user/getUserInfo')
      console.log(menus)
      // 过滤动态路由
      const filterRoutes = asyncRoutes.filter(t => menus.some(m => m.includes(t.children[0].name)))
      // 添加路由到路由配置中
      // 注意 : addRotues不会初始配置
      router.addRoutes([
        ...filterRoutes,
        { path: '*', redirect: '/404', hidden: true }
      ])
      // 解决菜单显示不正确的问题
      router.options.routes = [...constantRoutes, ...filterRoutes]
      // 解决刷新404/白屏的问题
      // (1)把404放在路由的最后面
      // (2)重新跳转一次
      next(to.path)
      */
      // 菜单权限 - 标准写法(vuex)
      const { roles: { menus }} = await store.dispatch('user/getUserInfo')
      const filterRoutes = await store.dispatch('permission/filterRoutes', menus)
      router.addRoutes([
        ...filterRoutes,
        { path: '*', redirect: '/404', hidden: true }
      ])
      next(to.path)
    }
    next()
  } else {
    next('/login')
  }
})
// 后置路由守卫--在页面跳转之后做拦截
router.afterEach((to, from) => {

})
